<template>
	<view class="content-hor">
		<block v-for="(item,index) in rateList" :key="index">
			<icon class="star-view fa fa-lg" :class="item ? 'fa-star' : 'fa-star-o'" :style="{ color: item ? '#FFD21D' : '#c6c3c3' }" />
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			rateValue: {
				type: Number,
				value: 3
			}
		},
		data() {
			return {
				rateList: []
			};
		},
		mounted() {
			let rateList = []
			for (let i = 0; i < 5; i++) {
				if (i < this.rateValue) {
					rateList.push(1)
				} else {
					rateList.push(0)
				}
			}
			this.rateList = rateList
		},
	}
</script>

<style>
	@import '@/common/css/font-awesome.css';

	.star-view {
    font-size: small;
		margin: auto;
		margin-right: 3px;
	}
</style>
